<template>

	<view v-if="shopInfo.shop" class="store-info m-top20">
		<view class="store-top" @click="$navTo('shop/1.html')">
			<view class="store-logo">
				<u--image :src="$util.img(shopInfo.shop.shop_logo)" width="60px" height="30px" />
			</view>
			<view class="store-item">
				<view class="store-name">
					<text>{{ shopInfo.shop.shop_name || '' }}</text>
				</view>
				<view class="score-sum">综合评分：{{ shopInfo.shop.desc_score}}</view>
			</view>
		</view>
		<view class="score-detail">
			<view class="detail-item" @click="$navTo('/shop/1/list')">
				<text class="num">{{ shopGoodsCount }}</text>
				<text class="text">全部宝贝</text>
			</view>

			<view class="detail-item">
				<text class="num SZY-COLLECT-COUNT">{{ shop_collect_count }}</text>
				<text class="text">关注人数</text>
			</view>

			<view class="detail-item">
				<view>
					<text>描述相符</text>
					<text class="color">{{ shopInfo.shop.desc_score}}</text>
				</view>
				<view>
					<text>服务态度</text>
					<text class="color">{{ shopInfo.shop.service_score}}</text>
				</view>
				<view>
					<text>发货速度</text>
					<text class="color">{{ shopInfo.shop.send_score}}</text>
				</view>
			</view>
		</view>

		<view class="store-btn">
			<!-- 收藏店铺 -->
			<view class="store-btn-item collect-shop">
				<!-- <u-icon name="star" color="#2979ff" size="12"></u-icon> -->

				<!-- <i class="store-btn-icon collect-shop-icon">&nbsp;</i> -->
				<text class="store-btn-text">收藏本店</text>

			</view>
			<!-- 进入店铺 -->
			<view class="store-btn-item" @click="$navTo('shop/1.html')">
				<!-- <i class="store-btn-icon goto-shop-icon">&nbsp;</i> -->
				<text class="store-btn-text">进入店铺</text>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		components: {},
		props: {
			// 商品ID
			shopInfo: {
				type: Object
			},
			shopGoodsCount: {
				type: Number,
				default: 0
			},
			shop_collect_count: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {}
		},

		created() {},

		methods: {


		}
	}
</script>

<style lang="scss" scoped>
	/*商品详情店铺*/
	.store-info {
		width: 100%;
		overflow: hidden;
		background: #FFF;
		padding: 10px 0;
	}

	.store-info .store-top {
		width: 95%;
		margin: auto;
		overflow: hidden;
		height: 38px;
	}

	.store-info .store-top .store-logo {
		display: inline-block;
		height: 38px;
		border: 1px solid #efefef;
		vertical-align: top;
		padding: 3px;
		box-sizing: border-box;
	}

	// .store-info .store-top .store-logo image {
	// 	height: 30px;
	// 	width: 60px;
	// }

	.store-info .store-top .store-item {
		display: inline-block;
		margin-left: 8px;
	}

	.store-info .store-top .store-item .store-name {
		height: 25px;
		overflow: hidden;
		line-height: 25px;
		font-size: 0.7rem;
		color: #353535;
		vertical-align: top;
	}

	.store-info .store-top .store-item .store-name em {
		display: inline-block;
		width: auto;
		height: 18px;
		line-height: 18px;
		text-align: center;
		border-radius: 3px;
		color: #fff;
		vertical-align: middle;
		font-size: 12px;
		padding: 0px 3px;
	}

	.store-info .store-top .store-item .score-sum {
		font-size: 12px;
		color: #999;
		line-height: 13px;
	}

	.store-info .score-detail {
		width: 95%;
		margin: 15px auto 10px;
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
	}

	.store-info .score-detail .detail-item {
		display: inline-block;
		overflow: hidden;
		position: relative;
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		-ms-flex: 1;
		flex: 1;
	}

	.store-info .score-detail .detail-item:after {
		content: '';
		width: 1px;
		height: 44px;
		background: #e3e5e9;
		position: absolute;
		top: 8px;
		right: 0;
		transform: scaleX(0.5);
		-webkit-transform: scaleX(0.5);
	}

	.store-info .score-detail .detail-item:last-child:after {
		content: none;
	}

	.store-info .score-detail .detail-item text {
		display: block;
		line-height: 20px;
		text-align: center;
	}

	.store-info .score-detail .detail-item .num {
		font-size: 13px;
		color: #353535;
		line-height: 30px;
		margin-top: 5px;
	}

	.store-info .score-detail .detail-item .text {
		font-size: 12px;
		color: #999;
	}

	.store-info .score-detail .detail-item:last-child view {
		display: block;
		width: 100%;
		text-align: center;
		height: 20px;
		font-size: 12px;
		line-height: 20px;
		color: #999;
	}

	.store-info .score-detail .detail-item:last-child text {
		display: inline-block;
		color: #999;
		font-size: 12px;
	}

	.store-info .score-detail .detail-item:last-child .color {
		margin-left: 4px;
		display: inline-block;
		font-size: 12px;
		width: 10px;
	}

	.store-info .store-btn {
		width: 95%;
		overflow: hidden;
		margin: auto;
	}

	.store-info .store-btn .store-btn-item {
		float: left;
		width: 48%;
		font-size: 0;
	}

	.store-info .store-btn .store-btn-item {
		text-align: center;
		// width: 75%;
		display: block;
		font-size: 0;
		position: relative;
		margin: 0 auto;
		// display: flex;
		// flex-direction: row;
		// justify-content: center;
	}

	.store-info .store-btn .store-btn-item:before {
		text-align: center;
		line-height: 60px;
		border: 1px solid #d7d7d7;
		border-radius: 30px;
		content: "";
		position: absolute;
		left: 0px;
		top: 0px;
		width: 200%;
		height: 200%;
		transform-origin: 0 0;
		transform: scale(.5, .5);
		box-sizing: border-box;
		-webkit-transform-origin: 0 0;
		-webkit-transform: scale(.5, .5);
		-webkit-box-sizing: border-box;
	}

	.store-info .store-btn .store-btn-item:last-child {
		float: right;
	}

	.store-info .store-btn .store-btn-item .store-btn-text {
		display: inline-block;
		font-size: 14px;
		color: #666;
		line-height: 14px;
		vertical-align: top;
		margin: 8px 0;
	}

	.store-info .store-btn .store-btn-item .store-btn-icon {
		display: inline-block;
		// background: url(../images/score-detail-bg.png) no-repeat;
		width: 16px;
		height: 16px;
		background-size: 16px auto;
		margin-right: 4px;
		vertical-align: top;
		margin-top: 7px;
	}

	.store-info .store-btn .store-btn-item .store-btn-icon.collect-shop-icon {
		background-position: 0 0px;
	}

	.store-info .store-btn .store-btn-item .store-btn-icon.collected-shop-icon {
		background-position: 0 -16px;
	}

	.store-info .store-btn .store-btn-item .store-btn-icon.goto-shop-icon {
		background-position: 0px -32px;
	}
</style>
